/********************************
* namespaces
*********************************/
var Narti = Narti || {};
Narti.Canvas = Narti.Canvas || {};

Narti.Canvas.numToRgba =  function (num, alfa){
		if(alfa === undefined)alfa = 1.0;
		var rgba = "rgba(" + num + "," + num + "," + num + "," + alfa.toString() + ")";
	//	console.log(rgba);
		return rgba;
	}

/********************************
* constructor
*********************************/
Narti.Canvas.Logo = function(titleSelector, logoSelector, options){
	var options = options || {};
	var maxLen = options.maxLen || 32;
        
	this.font = options.font || {};
	this.font.maxsize = this.font.maxsize || 42;
        
        this.color = options.color || 85;
	
	this.titleText = ($(titleSelector).text()).substring(0, maxLen);
	
	this.font.size =  this.font.maxsize  - this.titleText.length;	
				
	this.canvas = document.createElement("canvas");
	if( this.canvas === null){		
		$(logoSelector).append(titleText).css({color:"#555", 'font-size' : fontSize.toString()  });
		return;
	}

	
	var fontString = "";
	if( this.font.weight !== null){
		fontString += "  " + this.font.weight;
	}
	
	if( this.font.style !== null){
		fontString += "  " + this.font.style;
	}
	
	fontString += "  " + this.font.size + "px";
	
		
	if( this.font.family !== null){
		fontString += "  " + this.font.family;
	}
	
	
	if( typeof options.clickCallback == "function" ){
		this.canvas.addEventListener("click", options.clickCallback, false);
	}
	
	//console.log("font Logo : " + fontString);
	
	$(logoSelector).append(this.canvas);
	this.context = this.canvas.getContext('2d');
	this.context.font = fontString;

	
}

Narti.Canvas.Logo.prototype = {
	animate : function(ms){
		this.step = -1;
		this.interval = ms;
		
		this.intervalID = setInterval(
			(function(self) {
				 	 return function() {self.draw();
		    	 }
			})(this), this.interval);  
		
	},
	draw : function(){

		this.context.clearRect(0,0, this.canvas.width, this.canvas.height);

		this.context.shadowColor =  Narti.Canvas.numToRgba(this.color-30);
		this.context.shadowOffsetX = 10;
		this.context.shadowOffsetY = 10;
		this.context.shadowBlur = 4;

		this.context.fontBaseline = "top";
		this.context.fillStyle = Narti.Canvas.numToRgba(this.color);
		this.context.fillText( this.titleText, 0, this.font.size + 1);


		if( this.color <= 55){
				this.step = +1;
		}else if(this.color >= 85){
				this.step = -1;
		}

		this.color += ( this.step ) *  1;

	}

};
/********************************
* constructor
*********************************/
Narti.Canvas.Scene = function(w, h, a){
	var canvas = document.createElement("canvas");
	if( canvas === null){
		if( a )	a.append(text).css({color:"#555", 'font-size' : '1.2em' });;
		return;
	}
	
	this.canvas = canvas;
	this.canvas.width = w;
	this.canvas.height = h;
	this.context = this.canvas.getContext('2d');
	
	a.append(this.canvas);
	
}

Narti.Canvas.Scene.prototype.addText = function(text, options){
	this.textImg = new Narti.Canvas.TextImage(text, this.canvas.width, options);
	this.textImage = this.textImg.canvas;
	this.imgWidth = this.textImg.w;
	this.imgHeight = this.textImg.h;
	
	this.scrollText(40);
	
}

Narti.Canvas.Scene.prototype.scrollText = function(ms){
	var _this = this;
	var y = 0;
					
	function animate() { 
		y = y - 1; 
		redraw(); 
		setTimeout(animate, ms); 
	} 
	

	
	function redraw(){
		
	//	console.log(y);
		
		_this.context.clearRect(0,0, _this.canvas.width, _this.canvas.height);
		_this.context.drawImage(_this.textImage, 0, y);
		if (y < -1 * (_this.imgHeight - _this.canvas.height)) 
			_this.context.drawImage(_this.textImage, 0,  y + _this.imgHeight); 
			
		if (y <= -1 * _this.imgHeight) 
			y = y + _this.imgHeight; 
	
	}
	
	animate();
	

}

/********************************
* constructor
*********************************/
Narti.Canvas.TextImage = function(text, w, options){
	this.canvas = document.createElement("canvas");
	if(this.canvas === null)return;
	
	var options = options || {};
	this.shadow = options.shadow || false;
	this.color = options.color || 85;
	
	this.canvas.width = w;
	
	this.font = options.font || {};
	this.margin = options.margin || 10;
	
	this.font.size = this.font.size || 10;
	
	this.fontString = "";
	if( this.font.weight !== null){
		this.fontString += "  " + this.font.weight;
	}
	
	if( this.font.style !== null){
		this.fontString += "  " + this.font.style;
	}
	
	this.fontString += "  " + this.font.size + "px";
	
		
	if( this.font.family !== null){
		this.fontString += "  " + this.font.family;
	}
	
	this.context = this.canvas.getContext('2d');
	this.context.font = this.fontString;
	
	
	var words = text.split(' '); 
	
	var row = '';
	var lenRow = this.canvas.width - 2 * this.margin;
	
	this.rows = [];
	for(var i = 0; i < words.length; i++){
		var dim = this.context.measureText(row + " " + words[i]);
		if( dim.width < lenRow ){
			row += " " + words[i];		
		}else{
			this.rows.push(row);
			row = words[i];
		}
	}
	if( dim.width < lenRow ){
		this.rows.push(row);		
	}
	
	
	var rowSize = 2 * this.font.size;			
	
	this.canvas.height = rowSize * (this.rows.length + 1);
	
	this.w = this.canvas.width;
	this.h = this.canvas.height;
	
	this.draw();
};
	
Narti.Canvas.TextImage.prototype = {
	draw: function(){	
	
		this.context.font = this.fontString;
		
		if(this.shadow){
			this.context.shadowColor =  Narti.Canvas.numToRgba(this.color - 30);
			this.context.shadowOffsetX = 5;
			this.context.shadowOffsetY = 5;
			this.context.shadowBlur = 2;
		}
		
		this.context.fontBaseline = "top";
		this.context.fillStyle = Narti.Canvas.numToRgba(this.color, 1);
		
		var rowSize = 2 * this.font.size;	
		for(var i = 0;i < this.rows.length; i++){
			this.context.fillText( this.rows[i], 0, ( i + 1) * rowSize);
		}
	
		//document.body.appendChild(this.canvas);
	}
	
}

